<template>
  <div class="w-full">
    <div class="mb-5 h-full">
      <div class="p-5 bg-white rounded-[6px] mb-6">
        <div class="flex justify-between items-center">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/examCourses/post' }" class="text-black/[0.45]">学员岗位
            </el-breadcrumb-item>
            <el-breadcrumb-item class="text-black/[0.45]">考核汇总</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="flex items-center gap-2">
            <img src="@/assets/images/head.png" alt="">
            <span class="text-[16px] text-black/[0.88]">{{ name }}</span>
          </div>
        </div>
        <el-divider />
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-2">
            <span class="text-black/[0.65] text-base">学习状态：</span>
            <el-radio-group v-model="studyStatus" :max="1" @change="getPaperList">
              <el-radio class="text-black/[0.88]" label="全部" value="00" />
              <el-radio class="text-black/[0.88]" label="未考核" value="2" />
              <el-radio class="text-black/[0.88]" label="未完成" value="0" />
              <el-radio class="text-black/[0.88]" label="已完成" value="1" />
            </el-radio-group>
          </div>
          <div class="flex items-center gap-2">
            <div class="flex items-center gap-2 mr-8">
              <div class="text-black/[0.65] text-base cursor-pointer" @click="handleSort('time')"
                :class="{ 'text-custom-blue': sortOrder === 'write_date desc' }">最新
              </div>
              <div class="text-black/[0.65] text-base flex items-center gap-2 cursor-pointer"
                @click="handleSort('test_number')"
                :class="{ 'text-custom-blue': sortOrder === 'test_number' || sortOrder === 'test_number desc' }">
                <span>考核人数</span>
                <el-icon v-if="sortOrder === 'write_date' || sortOrder === 'write_date desc' || sortOrder === ''">
                  <Sort />
                </el-icon>
                <div v-else class="flex">
                  <el-icon v-if="sortOrder === 'test_number'">
                    <Top />
                  </el-icon>
                  <el-icon v-else>
                    <Bottom />
                  </el-icon>
                </div>
              </div>
            </div>
            <div class="flex items-center">
              <el-input v-model="courseName" style="width: 240px;height: 32px;" placeholder="请输入考核名称">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <search />
                  </el-icon>
                </template>
              </el-input>
              <Button @click="getPaperList">搜索</Button>
            </div>
          </div>
        </div>
      </div>
      <div class="overflow-auto" style="height: calc(100% - 200px);">
        <div class="mb-5">
          <div class="grid grid-cols-4 gap-4">
            <assessCard :cardData="cardData" @cardClick="handleCardClick" />
          </div>
        </div>
      </div>
      
      <div class="flex justify-center items-center">
          <el-pagination :current-page="paginationData.currentPage" :page-size="paginationData.pageSize"
            :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
            :total="paginationData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

    </div>

  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import assessCard from "@/views/examCourses/components/assessCard.vue";
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { examApi } from "@/api/index.js";
import { StorageUtil } from "@/utils/common.js";
const router = useRouter()
const route = useRoute()
const cardData = ref([])
const studyStatus = ref('00')
const courseName = ref('')
const sortType = ref('write_date')
const sortOrder = ref('write_date desc')
const { id, name } = route.query
const paginationData = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

onMounted(() => {
  getPaperList()
})

//获取考核列表
const getPaperList = () => {
  if (!studyStatus.value) {
    return
  }
  const params = {
    name: courseName.value,
    status: studyStatus.value === '00' ? '' : studyStatus.value,
    page: paginationData.currentPage,
    pageSize: paginationData.pageSize,
    job: id,
    order: sortOrder.value
    // order: sortType.value === 'write_date' ? sortType.value : sortOrder.value
  }
  examApi.getPaperList(params).then(({ items, total }) => {
    cardData.value = items
    paginationData.total = total
  })
}

const handleSort = (type) => {
  // sortType.value = type
  if (type === 'time') {
    if (sortOrder.value === 'write_date desc') {
      sortOrder.value = ''
    } else {
      sortOrder.value = 'write_date desc'
    }
  } else {
    if (sortOrder.value === 'test_number') {
      sortOrder.value = 'test_number desc'
    } else {
      sortOrder.value = 'test_number'
    }
  }
  getPaperList()
}
const handleCardClick = (row) => {
  StorageUtil.session.set('assessData', row)
  router.push({
    path: '/examCourses/chapter',
    query: {
      jobId: id,
      itemId: row.id,
      jobName: name,
      name: row.name
    }
  })
}
const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getPaperList()
}
const handleCurrentChange = (val) => {
  paginationData.currentPage = val;
  getPaperList()
}
</script>

<style scoped>
:deep(.el-breadcrumb__inner.is-link) {
  color: rgba(0, 0, 0, 0.45);
  font-weight: normal;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #33A0FF;
  font-weight: 500;
}
</style>
